import * as React from 'react';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import PeopleIcon from '@mui/icons-material/People';
import BarChartIcon from '@mui/icons-material/BarChart';
import LayersIcon from '@mui/icons-material/Layers';
import AssignmentIcon from '@mui/icons-material/Assignment';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import ExpandMore from '@mui/icons-material/ExpandMore';
import ExpandLess from '@mui/icons-material/ExpandLess';
import Collapse from '@mui/material/Collapse';
import List from '@mui/material/List';
import StarBorder from '@mui/icons-material/StarBorder';
import { useNavigate } from "react-router-dom";
import { OneMenu, SubMenu } from 'components/menu/Menu';
import { uniqueId } from '@@/utils/index';
import { isAdmin } from '@@/utils/index';




export const mainListItems = (
    <React.Fragment>
        <ListItemButton>
            <ListItemIcon>
                <DashboardIcon />
            </ListItemIcon>
            <ListItemText primary="Dashboard" />
        </ListItemButton>

        <ListItemButton>
            <ListItemIcon>
                <ShoppingCartIcon />
            </ListItemIcon>
            <ListItemText primary="Orders" />
        </ListItemButton>

        <ListItemButton>
            <ListItemIcon>
                <PeopleIcon />
            </ListItemIcon>
            <ListItemText primary="Customers" />
        </ListItemButton>
        <ListItemButton>
            <ListItemIcon>
                <BarChartIcon />
            </ListItemIcon>
            <ListItemText primary="Reports" />
        </ListItemButton>
        <ListItemButton>
            <ListItemIcon>
                <LayersIcon />
            </ListItemIcon>
            <ListItemText primary="Integrations" />
        </ListItemButton>
    </React.Fragment>
);

export const MainListItems2 = () => {

    const [mainMenuOpen, setMainMenuOpen] = React.useState(false)

    const navigate = useNavigate()

    const toogleMainMenu = () => {
        setMainMenuOpen((pre) => !pre);
    }

    const gotoMenuPath = (path) => {
        navigate(path)
    };


    return (<React.Fragment>

        <div>
            <ListItemButton onClick={toogleMainMenu}>
                <ListItemIcon>
                    <InboxIcon />
                </ListItemIcon>
                <ListItemText primary="用户管理" />
                {mainMenuOpen ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>

            <div>
                <Collapse in={mainMenuOpen} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        <ListItemButton sx={{ pl: 4 }} onClick={() => gotoMenuPath(`/dashboard/users/list`)}>
                            <ListItemIcon>
                                <StarBorder />
                            </ListItemIcon>
                            <ListItemText primary="用户列表" />
                        </ListItemButton>

                        <ListItemButton sx={{ pl: 4 }} onClick={() => gotoMenuPath(`/dashboard/users/add`)}>
                            <ListItemIcon>
                                <StarBorder />
                            </ListItemIcon>
                            <ListItemText primary="创建账号" />
                        </ListItemButton>
                    </List>
                </Collapse>
            </div>
        </div>


        {/* <ListItemButton>
            <ListItemIcon>
                <ShoppingCartIcon />
            </ListItemIcon>
            <ListItemText primary="Orders" />
        </ListItemButton>

        <ListItemButton>
            <ListItemIcon>
                <PeopleIcon />
            </ListItemIcon>
            <ListItemText primary="Customers" />
        </ListItemButton>
        <ListItemButton>
            <ListItemIcon>
                <BarChartIcon />
            </ListItemIcon>
            <ListItemText primary="Reports" />
        </ListItemButton>
        <ListItemButton>
            <ListItemIcon>
                <LayersIcon />
            </ListItemIcon>
            <ListItemText primary="Integrations" />
        </ListItemButton> */}
    </React.Fragment>
    );

}





const renderMenu = (menus) => {
    return menus.map(item => {
        if (item.children) {
            return (
                <SubMenu item={item} key={uniqueId()}>
                    {renderMenu(item.children)}
                </SubMenu>
            )
        } else {
            return (
                <OneMenu item={item} key={uniqueId()} />
            )
        }

    })
}







export const MainListItems3 = () => {

    const [menus, setMenus] = React.useState(() => {

        const menuList = [
            {
                name: "本地LLM模型",
                onClick: () => {
                    // window.open(`${window.location.origin}${window.location.pathname}#/chatlocal`)
                    gotoMenuPath("/dashboard/chatlocal")
                }
            }
        ]


        try {
            if(isAdmin()) {
                menuList.unshift({
                    name: "用户管理",
                    children: [
                        {
                            name: "用户列表",
                            onClick: () => {
                                gotoMenuPath("/dashboard/users/list")
                            }
                        },
                        {
                            name: "创建账号",
                            onClick: () => {
                                gotoMenuPath("/dashboard/users/add")
                            }
                        }
                    ]
                })
            }

            // console.log(menuList)
            return menuList
        } catch (e) {
            console.error(e)
        }
    })

    const navigate = useNavigate()

    const gotoMenuPath = (path) => {
        navigate(path)
    }


    return (
        <div>
            {
                renderMenu(menus)
            }
        </div>
    )

}



export const secondaryListItems = (
    <React.Fragment>
        {/* <ListSubheader component="div" inset>
            Saved reports
        </ListSubheader>

        <ListItemButton>
            <ListItemIcon>
                <AssignmentIcon />
            </ListItemIcon>
            <ListItemText primary="Current month" />
        </ListItemButton>
        <ListItemButton>
            <ListItemIcon>
                <AssignmentIcon />
            </ListItemIcon>
            <ListItemText primary="Last quarter" />
        </ListItemButton>
        <ListItemButton>
            <ListItemIcon>
                <AssignmentIcon />
            </ListItemIcon>
            <ListItemText primary="Year-end sale" />
        </ListItemButton> */}
    </React.Fragment>
)

